<!DOCTYPE html>
<html>
<head>
	<title>rmurphey's example</title>
</head>
<body>
	<h1>This is My Nifty Feature</h1>

	<div id="myFeature">
	  <ul class="sections">
	    <li>
	      <h2><a href="/section/1">Section 1</a></h2>
	      <ul>
	        <li>
	          <h3><a href="/section/1/content/1">Section 1 Title 1</a></h3>
	          <p>The excerpt content for Content Item 1</p>
	        </li>
	        <li>
	          <h3><a href="/section/1/content/2">Section 1 Title 2</a></h3>
	          <p>The excerpt content for Content Item 2</p>
	        </li>
	        <li>
	          <h3><a href="/section/1/content/3">Section 1 Title 3</a></h3>
	          <p>The excerpt content for Content Item 3</p>
	        </li>
	      </ul>
	    </li>

	    <li>
	      <h2><a href="/section/2">Section 2</a></h2>
	      <ul>
	        <li>
	          <h3><a href="/section/2/content/1">Section 2 Title 1</a></h3>
	          <p>The excerpt content for Content Item 1</p>
	        </li>
	        <li>
	          <h3><a href="/section/2/content/2">Section 2 Title 2</a></h3>
	          <p>The excerpt content for Content Item 2</p>
	        </li>
	        <li>
	          <h3><a href="/section/2/content/3">Section 2 Title 3</a></h3>
	          <p>The excerpt content for Content Item 3</p>
	        </li>
	      </ul>
	    </li>

	    <li>
	      <h2><a href="/section/3">Section 3</a></h2>
	      <ul>
	        <li>
	          <h3><a href="/section/3/content/1">Section 3 Title 1</a></h3>
	          <p>The excerpt content for Content Item 1</p>
	        </li>
	        <li>
	          <h3><a href="/section/3/content/2">Section 3 Title 2</a></h3>
	          <p>The excerpt content for Content Item 2</p>
	        </li>
	        <li>
	          <h3><a href="/section/3/content/3">Section 3 Title 3</a></h3>
	          <p>The excerpt content for Content Item 3</p>
	        </li>
	      </ul>
	    </li>

	  </ul>
	</div>
</body>
<script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script>
	var myFeature = {
	    config: {
	    	container: $('#myFeature')
	    },
	    init : function(config) {
	    	if(config && typeof(config) == 'object') {
	    		$.extend(myFeature.config, config);
	    	}
	    	myFeature.$container = myFeature.config.container;
	    	myFeature.$sections = myFeature.$container.find('ul.sections > li');
	    	myFeature.$section_nav = $('<p/>')
	    	      .attr('id','section_nav')
	    	      .prependTo(myFeature.$container);
	    	myFeature.$item_nav = $('<p/>')
	    	      .attr('id','item_nav')
	    	      .insertAfter(myFeature.$section_nav);
	    	myFeature.$content = $('<p/>')
	    	     .attr('id','content')
	    	     .insertAfter(myFeature.$item_nav);
	    	myFeature.buildSectionNav(myFeature.$sections);
	    	myFeature.$section_nav.find('li:first').click();
	    	myFeature.$container.find('ul.sections').hide();
	    	myFeature.initialized = true;
	    },
	    buildSectionNav : function($sections) {
	    	$sections.each(function(){
	    		var $section = $(this);
	    		$('<li/>')
	    			.text($section.find('h2:first').text())
	    			.appendTo(myFeature.$section_nav)
	    			.data('section', $section)
	    			.click(myFeature.showSection);
	    	})
	    },
	    buildItemNav : function($items) {
	    	$items.each(function() {
	    	    var $item = $(this);
	    	    $('<li>')
	    	      .text($item.find('h3:first').text())
	    	      .appendTo(myFeature.$item_nav)
	    	      .data('item', $item)
	    	      .click(myFeature.showContentItem);

	    	});
	    },
	    showSection : function() {
	    	  var $li = $(this);
	    	  myFeature.$item_nav.empty();
	    	  myFeature.$content.empty();

	    	  var $section = $li.data('section');
	    	  $li.addClass('current')
	    	    .siblings().removeClass('current');

	    	  var $items = $section.find('ul li');
	    	  myFeature.buildItemNav($items);
	    	  myFeature.$item_nav.find('li:first').click();
	    },
	    showContentItem : function() {
	    	var $li = $(this);
	    	 $li.addClass('current')
	    	   .siblings().removeClass('current');
	    	 var $item = $li.data('item');
	    	 myFeature.$content.html($item.html());
	    }
	};

	$(document).ready(myFeature.init);
</script>
</html>